<template>
    <div class="emde">
        <div class="top">
            <div class="ed1">
                <div class="ed3">
                    <CommonImage class="edi1" :src="userData.avatar" />
                </div>
                <div class="ed4">
                    <div class="ed5">{{ userData.realName }}</div>
                    <div class="ed6">
                        <span class="ed7">{{ userData.job }}</span>
                        <span class="ed8">SID.{{ userData.no }}</span>
                    </div>
                    <div class="ed9">{{ userData.org }}</div>
                </div>
            </div>

            <!--菜单-->
            <div class="ed2">
                <MoreMenuSelect>
                    <img src="../../assets/images/eMore.svg" class="edi2">
                    <template v-slot:item>
                        <div class="mean1">
                            <div class="mean2" @click="editEmploy">
                                <div><img src="../../assets/images/h41.svg" class="mean4"></div>
                                <div class="mean3">{{ $t('text.Employee.l100') }}</div>
                            </div>
                            <DialogLayout37 :sysUserId="userData.sysUserId"></DialogLayout37>
                            <DialogLayout38 :sysUserId="userData.sysUserId" :status="userData.status"></DialogLayout38>
                            <DialogLayout39 :sysUserId="userData.sysUserId"></DialogLayout39>
                            <DialogLayout40 :sysUserId="userData.sysUserId" :depart="userData.depart"></DialogLayout40>
                            <DialogLayout41 :sysUserId="userData.sysUserId" :lock="userData.lock"></DialogLayout41>
                            <DialogLayout42 :sysUserId="userData.sysUserId"></DialogLayout42>
                        </div>
                    </template>
                </MoreMenuSelect>
            </div>


        </div>
        <div class="contain">

            <div class="chapter" v-for="item in titleList" v-bind:key="item">
                <div class="ed10">{{ item.title }}</div>
                <div class="ed11">
                    <div class="ed12" v-for="data of item.data" v-bind:key="data">
                        <div class="ed13">{{ data.name }}</div>
                        <div class="ed14" v-if="data.key != 'sex'">
                            {{ userData[data.key] == null ? '-' : userData[data.key] }}
                        </div>
                        <div class="ed14" v-if="data.key == 'sex'">
                            {{ userData[data.key] == null ? '-' : userData[data.key]
                                == '1' ? $t('text.DialogLayout.l275') : userData[data.key]
                                    == '0' ? $t('text.DialogLayout.l276') : $t('text.DialogLayout.l277') }}
                        </div>
                    </div>
                </div>
            </div>

            <div class="chapter">
                <div class="ed10">{{ $t('text.Employee.l58') }}</div>
                <div class="ed11">
                    <div class="ed12">
                        <div class="ed13">{{ $t('text.Employee.l59') }}</div>
                        <div class="ed14">{{ userData.idCard == null ? '-' : userData.idCard }}</div>
                    </div>
                </div>
                <div class="ed15">
                    <CommonUploadImg :limit="1" :hit="$t('text.Employee.l60')" :fileList="imageList1" disabled>
                    </CommonUploadImg>
                    <CommonUploadImg :limit="1" :hit="$t('text.Employee.l61')" :fileList="imageList2" disabled>
                    </CommonUploadImg>
                </div>
            </div>
        </div>

    </div>
</template>
    
<script>
import DialogLayout37 from '@/components/dialogLayout/DialogLayout37.vue'
import CommonImage from '../../components/input/CommonImage.vue'
import { useFindById } from '../../http/api'
import DialogLayout38 from '@/components/dialogLayout/DialogLayout38.vue'
import DialogLayout39 from '@/components/dialogLayout/DialogLayout39.vue'
import DialogLayout40 from '@/components/dialogLayout/DialogLayout40.vue'
import DialogLayout41 from '@/components/dialogLayout/DialogLayout41.vue'
import DialogLayout42 from '@/components/dialogLayout/DialogLayout42.vue'
import CommonUploadImg from '@/components/input/CommonUploadImg.vue'
import MoreMenuSelect from '@/components/select/MoreMenuSelect.vue'
export default {
    components: {
        CommonImage,
        DialogLayout37,
        DialogLayout38,
        DialogLayout39,
        DialogLayout40,
        DialogLayout41,
        DialogLayout42,
        CommonUploadImg,
        MoreMenuSelect
    },
    props: {
    },
    data() {
        return {
            userData: {},
            titleList: [
                {
                    title: this.$t('text.Employee.l33'), data: [
                        { name: this.$t('text.Employee.l34'), key: 'entryTime' }, { name: this.$t('text.Employee.l35'), key: 'sex' }, { name: this.$t('text.Employee.l36'), key: 'birthTime' }, { name: this.$t('text.Employee.l37'), key: 'maritalStatus' },
                        { name: this.$t('text.Employee.l38'), key: 'qualification' }, { name: this.$t('text.Employee.l39'), key: 'major' }, { name: this.$t('text.Employee.l40'), key: 'graduationInstitution' }, { name: this.$t('text.Employee.l41'), key: 'graduateTime' },
                        { name: this.$t('text.Employee.l42'), key: 'mobile' }, { name: this.$t('text.Employee.l43'), key: 'socialAccounts' }, { name: this.$t('text.Employee.l44'), key: 'email' }, { name: this.$t('text.Employee.l45'), key: 'residentialAddress' },
                        { name: this.$t('text.Employee.l46'), key: 'recruitChannels' }, { name: this.$t('text.Employee.l47'), key: 'referee' }
                    ]
                },
                {
                    title: this.$t('text.Employee.l48'), data: [
                        { name: this.$t('text.Employee.l49'), key: 'contactName' }, { name: this.$t('text.Employee.l50'), key: 'contactRelation' }, { name: this.$t('text.Employee.l51'), key: 'contactMobile' }, { name: this.$t('text.Employee.l52'), key: 'contactEmail' }
                    ]
                },
                {
                    title: this.$t('text.Employee.l53'), data: [
                        { name: this.$t('text.Employee.l54'), key: 'bankCard' }, { name: this.$t('text.Employee.l55'), key: 'bankName' }, { name: this.$t('text.Employee.l56'), key: 'socialSecurity' }, { name: this.$t('text.Employee.l57'), key: 'accumulationFund' }
                    ]
                },
            ],
            imageList1: [],
            imageList2: [],
        }
    },
    mounted() {
        useFindById({ id: this.$route.query.id }).then(res => {
            if (res !== undefined) {
                this.userData = res
                if (res.idCardBack != "" && res.idCardBack != null)
                    this.imageList1 = [{ url: res.idCardBack }]
                if (res.idCardFront != "" && res.idCardFront != null)
                    this.imageList2 = [{ url: res.idCardFront }]
                console.log(res)
            }
        }).catch()

    },
    methods: {
        editEmploy() {
            localStorage.setItem("AddEmployees", JSON.stringify(this.userData))
            this.$router.push({ path: '/addEmployees', query: { edit: true } })
        }
    },
    watch: {
    },
    computed: {
    }

}
</script>
    
<style scoped>
.mean1 {
    background: white;
    box-shadow: 1px 1px 10px 2px #dbdbdb;
    padding: 10px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: max-content;
    right: 0;
}

.mean2 {
    display: flex;
    align-items: center;
}

.mean3 {
    border-bottom: 1px solid #eee;
    padding-bottom: 4px;
    margin-left: 5px;
}

.mean4 {
    width: 20px;
    height: 20px;
}

.emde {
    width: 100%;
    height: 100%;
    overflow: auto;
    padding: 20px 30px;
}

.top {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.chapter {
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-top: 10px;
    text-align: left;
}

.edi1 {
    width: 75px;
    height: 75px;
    border: 1px solid #eee;
    border-radius: 100%;
}

.edi2 {
    width: 30px;
    height: 30px;
}

.ed1 {
    display: flex;
    text-align: left;
}

.ed2 {
    position: relative;
    margin-right: 30px;
}

.ed4 {
    padding-left: 5px;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ed5 {
    color: black;
    font-size: 16px;
    font-weight: 500;
}

.ed6 {
    padding: 2px 0;
}

.ed7 {
    background: #6698ff;
    color: white;
    padding: 2px 7px;
    font-size: 12px;
    border-radius: 5px;
    margin-right: 10px;
}

.ed8 {
    color: black;
    padding: 2px 7px;
    font-size: 13px;
    border-radius: 5px;
    margin-right: 10px;
}

.ed9 {
    padding-top: 5px;
    font-size: 12px;
}

.ed10 {
    padding-bottom: 10px;
}

.ed11 {
    display: flex;
    flex-wrap: wrap;
    padding-left: 30px;
}

.ed12 {
    width: 25%;
    min-width: 120px;
    font-size: 12px;
    padding-bottom: 10px;
}

.ed13 {
    color: #999;
    padding-bottom: 3px;
}

.ed15 {
    display: flex;
    gap: 30px;
}
</style>